<template lang="pug">
.tag-manage
  .tag-container
    .tag-title 标签管理
    .tag-body
      .tag-section
        .tag-section-label 风格：
        .tag-section-bd
          .tag-section-list
            .tag-item(v-for="item in styleLabel" wx:key="item.id")
              .tag-item-txt {{item.labelName}}
              .iconfont.el-icon-close(@click="delTag(item)")
          .tag-section-handle
            .tag-handle-input
              el-input(placeholder="请输入标签名称" size="small" v-model="styleValue")
            .tag-handle-btn
              el-button(icon="el-icon-plus" size="small" @click="addTag(0)") 添加标签
      .tag-section
        .tag-section-label 类型：
        .tag-section-bd
          .tag-section-list
            .tag-item(v-for="item in typeLabel" wx:key="item.id")
              .tag-item-txt {{item.labelName}}
              .iconfont.el-icon-close(@click="delTag(item)")
          .tag-section-handle
            .tag-handle-input
              el-input(placeholder="请输入标签名称" size="small" v-model="typeValue")
            .tag-handle-btn
              el-button(icon="el-icon-plus" size="small" @click="addTag(1)") 添加标签
</template>

<script>
import { getLabelList, postAddLabel, postDeleteLabel } from 'api'
export default {
  name: 'tagManage',
  data () {
    return {
      styleValue: '',
      typeValue: '',
      styleLabel: [],
      typeLabel: []
    }
  },
  methods: {
    delTag (item) {
      this.$confirm('确定要删除该标签吗？', '删除提示').then(async () => {
        try {
          await this.$axios.post(postDeleteLabel, { content: { id: item.id } })
          this.$message.success('删除成功！')
        this.getList()
        } catch (err) {
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    },
    async addTag (type) {
      try {
        let query = { type }
        if (parseInt(type) === 1) {
          if (!this.typeValue) {
            this.$message.error('请先输入标签名称！')
            return
          }
          query.labelName = this.typeValue
        } else {
          if (!this.styleValue) {
            this.$message.error('请先输入标签名称！')
            return
          }
          query.labelName = this.styleValue
        }
        await this.$axios.post(postAddLabel, { content: { ...query } })
        this.styleValue = ''
        this.typeValue = ''
        this.$message.success('添加成功！')
        this.getList()
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        const { ResultSet } = await this.$axios.post(getLabelList)
        this.styleLabel = ResultSet.userData.data.styleLabel || []
        this.typeLabel = ResultSet.userData.data.typeLabel || []
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.tag-manage {
  padding: 0 32px 16px;
}
.tag-container {
  padding: 24px;
  background: #fff;
  border-radius: 4px;
}
.tag-title {
  font-size: 14px;
  color: #363636;
  line-height: 26px;
  font-weight: 700;
}
.tag-body {
  margin-top: 16px;
}
.tag-section {
  padding: 15px 0;
  display: flex;
}
.tag-section-label {
  width: 150px;
  text-align: right;
  font-size: 14px;
  color: #333;
  line-height: 32px;
}
.tag-section-bd {
  flex: 1;
  padding-left: 5px;
}
.tag-section-list {
  display: flex;
  flex-wrap: wrap;
}
.tag-item {
  padding: 8px 11px;
  background: #FF2E42;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  margin-right: 15px;
  .el-icon-close {
    color: #fff;
    font-size: 16px;
  }
}
.tag-item-txt {
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  margin-right: 5px;
}
.tag-section-handle {
  display: flex;
  align-items: center;
}
.tag-handle-input {
  width: 150px;
  margin-right: 15px;
}
</style>